<template>
    <div>
        <el-input v-model="value" :validate-event="false" :disabled="disabled" :placeholder="placeholder" @focus="visible = true" readonly size="small" />
        <el-dialog :visible="visible" title="成本中心名称" width="1000px" append-to-body top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @open="onOpen" @close="onClose">
            
                <el-form :model="searchForm" size="small" label-position="left" @submit.native.prevent label-suffix=":" ref="searchForm" label-width="100px">
                    <el-row :gutter="24">

                        <el-col :span="8">
                            <el-form-item size="small" label="成本中心名称" prop="ktext">
                                <el-input v-model="queryParams.ktext" :placeholder="$t('tips.pleaseInput') + '成本中心名称'" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item size="small" label="成本中心编码" prop="kostl">
                                <el-input v-model="queryParams.kostl" :placeholder="$t('tips.pleaseInput') + '成本中心名称'" />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item style="text-align:left;">
                                <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getList" size="mini">{{ $t("public.search") }}</el-button>
                                <el-button icon="el-icon-refresh" @click="reset" size="mini">{{ $t("public.reset") }}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="opera-body"  >
                     
                        <el-table border stripe v-loading="loading" ref="table" @selection-change="selectionChange" @select="selectOne" :data="tableData">
                            <el-table-column type="selection"  min-width="55" v-if="multiple" align="center" />
                            <el-table-column :label="$t('public.serialNum')" type="index" width="100" align="center">
                                <template slot-scope="scope">
                                    <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="成本中心编码" align="center" prop="kostl" show-overflow-tooltip />
                            <el-table-column label="成本中心名称" align="center" min-width="180" prop="ktext" show-overflow-tooltip />
                            <el-table-column :label="$t('public.opera')" v-if="!multiple" align="center" width="100">
                                <template slot-scope="scope">
                                    <a class="action-wrap" @click="choose(scope.row)" style="color:#5a9eaf">
                                        {{$t('rule.select')}}
                                    </a>
                                </template>
                            </el-table-column>
                        </el-table>

                        
                 
                </div>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
                   
            <div slot="footer" style="text-align: center;">
                <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
                <el-button type="primary" @click="submitData" icon="el-icon-check" size="small" v-if="multiple">{{$t('modal.yes')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import {
    costCenterListAPI,
   
} from '@/api/basic/process'
export default {
    name: 'SelectUserDialog',
    props: {
        value: {
            type: [String, Number, Array, Object],
            default() {
                return ''
            },
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: null,
        },
        titleName: {
            type: String,
            default: '',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        placeholder: {
            type: [Object, String],
        },
    },
    data() {
        return {
            total: 1,
            tableData: [],
            visible: false,
            ids: [],
            names: [],
            searchForm: {
                templateName: null,
            },
            flag: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            loading: false,
            data: null,
            title: '',
            nodeType: this.$store.state.fmea.nodeType,
            checkDatas: [],
        }
    },
    methods: {
        selectOne(e, row) {
            if (e.length === 0) {
                const index = this.checkDatas.findIndex((io) => {
                    return io.kostl === row.kostl
                })
                this.checkDatas.splice(index, 1)
            } else if (e.length > 0) {
                const index = this.checkDatas.findIndex((io) => {
                    return io.kostl === row.kostl
                })
                console.log(this.checkDatas)
                console.log(index)
                if (index === -1) {
                    let checkDatas = [...this.checkDatas]
                    checkDatas.push(row)
                    this.checkDatas = checkDatas
                } else {
                    this.checkDatas.splice(index, 1)
                }
            } else {
                let checkDatas = [...this.checkDatas]
                checkDatas.push(row)
                this.checkDatas = checkDatas
            }
            console.log(row, 'row')
            console.log(e, 'e')
        },
        deleteUser(item, index) {
            const findItem = this.tableData.find((io) => {
                return item.kostl === io.kostl
            })
            if (findItem) {
                this.$refs.table.toggleRowSelection(findItem, false)
            }
            this.checkDatas.splice(index, 1)
        },
        submitData() {
            let names = []
            let ids = []
            this.checkDatas.forEach((io) => {
                names.push(io.ktext)
                ids.push(io.kostl)
            })
            if (ids.length === 0) {
                this.$modal.msgWarning('请至少选择一个用户!')
                return
            }
            this.$emit('input', names.join(','))
            this.$emit('blur')
            this.$emit('callback', ids.join(','))
            this.$emit('sendData', this.checkDatas)
            this.visible = false
        },
        getList() {
            this.loading = true
            costCenterListAPI(this.queryParams).then((response) => {
                if (response.code == 200 && response.rows) {
                    this.flag = true
                    this.tableData = response.rows
                    this.total = response.total
                    this.loading = false
                    this.$nextTick(function () {
                        this.tableData.forEach((io) => {
                            this.checkDatas.forEach((ko) => {
                                if (io.kostl === ko.kostl) {
                                    this.$refs.table.toggleRowSelection(
                                        io,
                                        this.flag
                                    )
                                }
                            })
                        })
                        this.flag = false
                    })
                }
            })
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList()
        },
        // 多选框选中数据
        selectionChange(selection) {
            if (this.flag) {
                return
            }
            if (selection.length === 0) {
                this.tableData.forEach((io) => {
                    for (let i = 0; i < this.checkDatas.length; i++) {
                        if (io.kostl === this.checkDatas[i].kostl) {
                            this.checkDatas.splice(i, 1)
                            i--
                        }
                    }
                })
            } else {
                if (this.tableData.length === selection.length) {
                    let checkDatas = [...this.checkDatas]
                    selection.forEach((ko) => {
                        const temp = checkDatas.find((io) => {
                            return io.kostl === ko.kostl
                        })
                        if (!temp) {
                            checkDatas.push(ko)
                        }
                    })
                    this.checkDatas = checkDatas
                }
            }
        },
        // 窗口打开
        onOpen() {
            this.getList()
        },
        // 窗口关闭
        onClose() {
            this.visible = false
        },
        handleConfirm() {
            this.visible = false
        },
        choose(row) {
            this.$emit('input', row.ktext)
            this.$emit('callback', row.kostl)
            this.$emit('sendData', row)
            this.visible = false
        },
        // 窗口关闭前执行
        close() {
            this.visible = false
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
.container-table {
    
}
.opera-body {
    display: flex;
    height: 100%;
}
.opera-check {
    flex: 0.3;
}
::v-deep .hideCheckbox .el-checkbox {
    display: none;
}
ul {
    list-style: none;
    min-height: 443px;
    max-height: 443px;
    overflow-y: auto;
    margin: 0px;
    padding: 0px;
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 8%);
}
li {
    font-size: 12px;
    padding-left: 12px;
    margin: 0px;
    position: relative;
    line-height: 37px;
}
.el-icon-delete {
    position: absolute;
    right: 5px;
    color: red;
    top: 12px;
    font-size: 14px;
    cursor: pointer;
}
</style>
